<template>
  <div class="active">
    <div class="main manage-main main-has-side-nav" p-id="7">
      <div mx-vframe="true" id="magix_vf_main" class="innermain" p-id="8">
        <div mx-vframe="true" id="J_index_content" p-id="24">
          <div class="cp-index" p-id="27" data-spm-anchor-id="a219t.11817064.1998910419.i0.4e8475a5W1UJWB">
            <div class="block-head" p-id="28" data-spm-anchor-id="a219t.11817064.1998910419.i2.4e8475a5W1UJWB">
              <h4 class="f20" p-id="29">
                发起的活动招商
                <span class="color-l f12" p-id="31">
                  <span
                    class="ml20 mr20"
                    p-id="32">|</span>
                  团长：<span class="color-brand" p-id="35">
                    <span p-id="36">乐推联盟</span>
                    <!--deleted-37--></span>
                </span>
              </h4>
              <div class="color-l" p-id="38">
                <p class="mt10" p-id="39">通过发起招商活动，打通招商、审核、推广全链路，简化操作路径，提高推广效率。
                  <a
                    href="#"
                    target="_blank"
                    class="link-underline color-brand f12"
                    p-id="967"
                    data-spm-click="gostr=/alimama.11;locaid=dd37fab59">新版说明</a>
                </p>
                <!--deleted-43-->
                <p style="margin-top:4px;" p-id="44">无商品报名的活动报名时间截止后保留3天，有商品报名的活动推广时间截止后保留180天，此后系统自动清理。
                </p>
              </div>
              <a
                href="#"
                data-spm-click="gostr=/alimama.11;locaid=df244a99f"
                class="rtn"
                p-id="46">查看活动招商简介
                &gt;</a>
            </div>
            <div class="toggle-navs" p-id="48">
              <ul
                class="primary-lavaLamp clearfix mb20"
                bx-name="app/exts/lavalamp/index"
                bx-options="{speed: 200}"
                p-id="49"
                data-clientid="4"
                data-spm-anchor-id="a219t.11817064.1998910419.i1.4e8475a5W1UJWB">
                <li class="current" p-id="50"><a
                  href="#"
                  data-spm-click="gostr=/alimama.11;locaid=d71193313"
                  p-id="51">普通活动招商</a></li>
                <li class="" p-id="55"><a
                  href="#"
                  data-spm-click="gostr=/alimama.11;locaid=dd2243a14"
                  p-id="56">站外内容招商</a>
                </li>
                <li class="back" style="left: 0px; width: 136px;"></li>
              </ul>
            </div>
            <div class="table-container" p-id="60">
              <div class="toolbar" p-id="61">
                <div
                  mx-vframe="true"
                  mx-view="app/views/manage/cpevent/list_filter"
                  id="J_cpevent_index_filter"
                  p-id="62">
                  <span class="input-search fr" p-id="91">
                    <input
                      type="text"
                      class="input"
                      placeholder="活动标题/活动id"
                      maxlength="30"
                      mx-keydown="search"
                      value="">
                    <span
                      class="search-tag-x pubfont"
                      mx-click="clearSearch()"
                      data-spm-click="gostr=/alimama.11;locaid=d71dd5850"
                      p-id="93">
                      </span>
                  </span>
                  <a
                    class="btn btn-brand w100 mr10"
                    @click="doadd"
                  >发起活动</a>
                  <span class="mr10" p-id="102">
                    <div class="dropdown" data-moduleid="components/dropdown" data-clientid="8">
                      <button
                        class="btn btn-default dropdown-toggle"
                        type="button"
                        value=""
                        bx-click="toggle()">
                        <span class="dropdown-toggle-label" contenteditable>所有状态</span>
                        <!-- <span class="caret"> -->
                        <span class="caret_custom caret_brixfont">
                          <!-- 保留 caret_brixfont 是为了向后兼容，在下个版本中移除  -->
                          <span class="brixfont down"></span><!-- 向下 &#xe623; -->
                          <span class="brixfont up"></span><!-- 向上 &#xe62e;-->
                        </span>
                      </button>
                      <div class="dropdown-menu-wrapper">

                        <ul class="dropdown-menu">
                          <li class="active">

                            <a href="javascript:;" value="" bx-click="select()" title="所有状态">

                              <span>所有状态</span>
                            </a>

                          </li>

                          <li class="">

                            <a href="javascript:;" value="1" bx-click="select()" title="草稿">

                              <span>草稿</span>
                            </a>

                          </li>

                          <li class="">

                            <a href="javascript:;" value="2" bx-click="select()" title="系统校验中">

                              <span>系统校验中</span>
                            </a>

                          </li>

                          <li class="">

                            <a href="javascript:;" value="3" bx-click="select()" title="报名未开始">

                              <span>报名未开始</span>
                            </a>

                          </li>

                          <li class="">

                            <a href="javascript:;" value="4" bx-click="select()" title="报名中">

                              <span>报名中</span>
                            </a>

                          </li>

                          <li class="">

                            <a href="javascript:;" value="5" bx-click="select()" title="报名截止">

                              <span>报名截止</span>
                            </a>

                          </li>

                          <li class="">

                            <a href="javascript:;" value="7" bx-click="select()" title="推广中">

                              <span>推广中</span>
                            </a>

                          </li>

                          <li class="">

                            <a href="javascript:;" value="8" bx-click="select()" title="结束">

                              <span>结束</span>
                            </a>

                          </li>

                          <li class="">

                            <a href="javascript:;" value="9" bx-click="select()" title="已失效">

                              <span>已失效</span>
                            </a>

                          </li>

                        </ul>

                      </div>
                    </div>
                  </span>
                </div>
              </div>
              <!--deleted-63-->
              <div mx-vframe="true" mx-view="app/views/manage/cpevent/list_table" p-id="64" id="mx_n_36">
                <div class="table-with-border" p-id="66">
                  <div class="table-head" p-id="67">
                    <div
                      bx-name="app/exts/scrollfix/index"
                      p-id="68"
                      data-clientid="5"
                      style="position: static; top: auto; left: auto; width: auto; z-index: 999;"
                      class="">
                      <table class="table" p-id="69">
                        <thead p-id="70">
                          <tr class="" p-id="71">
                            <th class="left" width="20%" p-id="72">活动信息</th>
                            <th class="left" width="10%" p-id="74">状态</th>
                            <th class="left" width="14%" p-id="76">报名商品</th>
                            <th class="left" width="18%" p-id="78">活动时间</th>
                            <th class="left" width="14%" p-id="80">活动总付款金额</th>
                            <th class="center" width="120" p-id="82">操作</th>
                          </tr>
                        </thead>
                      </table>
                    </div>
                  </div>
                  <div class="table-wrapper" p-id="84">
                    <table class="table" p-id="122" id="mx_n_46">
                      <tbody id="activitytable">
                        <tr>
                          <td class="left" width="20%" >
                            <div>
                              <h6 class="mb5 title" >
                                <a class="color-d">
                                  <span contenteditable>抖音橱窗 内容达人直播APP重点对接活动WLLWLL141</span>
                                </a>
                              </h6>
                              <div class="color-l" p-id="626">
                                <p >活动ID：<span contenteditable>386993344</span></p>
                                <p >报名商品：<span contenteditable>238</span></p>
                              </div>
                            </div>
                          </td>
                          <td class="left" width="10%" >
                            <span class="event-status-promo" contenteditable>推广中</span>
                          </td>
                          <td class="left" width="14%" contenteditable>
                            <p > <span >报名商品：</span><span>238</span></p>
                            <p ><span >待审核：</span><span>123</span> </p>
                            <p ><span> 审核通过：</span> <span>112</span></p>
                          </td>
                          <td class="left" width="18%" >
                            <div class="fl" contenteditable>
                              <p ><span class="color-l" >起：</span>
                                <span>2020-11-30</span>
                              </p>
                              <p >
                                <span class="color-l" >止：</span>
                                <span>2020-12-31</span>
                              </p>
                            </div>
                          </td>
                          <td class="left" width="14%" contenteditable>
                            <span class="yuan">￥</span>
                            <span
                              class="integer" >1,035</span>
                            <span
                              class="pointer"
                            >.</span>
                            <span class="decimal" >10</span>
                          </td>
                          <td class="center" width="120" >
                            <div class="operation" >
                              <div class="btn-export" >
                                <button
                                  class="btn btn-small btn-brand btn-export-delegate w100 mb5"
                                >导出商品
                                </button>
                                <div
                                  class="btn-export-detail"
                                  id="btn-export-detail"
                                >
                                  <a class="btn btn-small mb5 w120" >导出报名商品</a>
                                  <a class="btn btn-small mb5 w120">导出Excel推广</a>
                                </div>
                              </div>
                              <a href="#" class="btn btn-gray btn-small mr10">审核</a>
                              <a href="#" class="btn btn-gray btn-small" >效果</a>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div
                  bx-name="app/exts/pagination/pagination"
                  class=""
                  p-id="89"
                  data-clientid="49"
                  data-total="1997"
                  data-cursor="1"
                  data-limit="40">
                  <div class="pagination-new">
                    <div class="pagination">
                      <a
                        href="javascript: void(0);"
                        class="btn-first btn btn-xlarge btn-unreach"
                        style="border: none"
                        bx-click="moveTo(0)">
                        <span class="pubfont"></span>上一页
                      </a>
                      <a
                        href="javascript: void(0);"
                        class="btn btn-xlarge btn-current"
                        style="border: none">1</a>
                      <a
                        href="javascript: void(0);"
                        bx-click="moveTo(2)"
                        class="btn btn-xlarge btn-white">2</a>
                      <a
                        href="javascript: void(0);"
                        bx-click="moveTo(3)"
                        class="btn btn-xlarge btn-white">3</a>
                      <a
                        href="javascript: void(0);"
                        bx-click="moveTo(4)"
                        class="btn btn-xlarge btn-white">4</a>
                      <a
                        href="javascript: void(0);"
                        bx-click="moveTo(5)"
                        class="btn btn-xlarge btn-white">5</a>
                      <a
                        href="javascript: void(0);"
                        bx-click="moveTo(6)"
                        class="btn btn-xlarge btn-white">6</a>
                      <a
                        href="javascript: void(0);"
                        bx-click="moveTo(7)"
                        class="btn btn-xlarge btn-white">7</a>
                      <span class="m n">...</span>
                      <a
                        href="javascript: void(0);"
                        bx-click="moveTo(50)"
                        class="btn btn-xlarge btn-white">50</a>
                      <a
                        href="javascript: void(0);"
                        class="btn-last btn btn-xlarge btn-white"
                        bx-click="moveTo(2)">下一页
                        <span class="pubfont"></span>
                      </a>
                    </div>
                    <div class="go"><span class="n">到第</span>
                      <input class="input" type="text" value="2">
                      <span class="n">页</span>
                      <button
                        class="btn btn-large btn-white"
                        bx-click="goToPage()">确定
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="mx_n_17">
        <div class="footer" p-id="14">
          <div class="footer-bd wrap" bx-name="components/footer" data-mode="simple" p-id="15" data-clientid="2">
            <div id="alimama-footer" data-spm="a214tr9">
              <div class="alimama-info">
                <div class="link">
                  <a target="_black" href="https://www.alimama.com/home/about-1.htm">联系客服</a>
                  <b>|</b>
                  <a target="_black" href="https://open.taobao.com/">开放平台</a>
                  <b>|</b>
                  <a
                    target="_black"
                    href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_ali_mama_division/suit_bu1_ali_mama_division201709111812_13128.html">法律声明</a>
                  <b>|</b>
                  <a target="_black" href="https://www.alimama.com/home/about-4.htm">意见反馈</a>
                  <b>|</b>
                  <a target="_black" href="https://jubao.alibaba.com/">廉正举报</a>
                </div>
                <div class="copyright">
                  <span>阿里妈妈版权所有 2007-现在</span>
                  <b>|</b>
                  <a target="_black" href="http://www.miibeian.gov.cn/">ICP证：浙B2-20070195</a>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  import $ from 'jquery'

  export default {
    name: 'Active',
    data () {
      return {}
    },
    computed: {},
    created () {

    },
    mounted () {

    },
    methods: {
      doadd () {
        const str = ` <tr>
                          <td class="left" width="20%" >
                            <div>
                              <h6 class="mb5 title" >
                                <a class="color-d">
                                  <span contenteditable>抖音橱窗 内容达人直播APP重点对接活动WLLWLL141</span>
                                </a>
                              </h6>
                              <div class="color-l" p-id="626">
                                <p >活动ID：<span contenteditable>386993344</span></p>
                                <p >报名商品：<span contenteditable>238</span></p>
                              </div>
                            </div>
                          </td>
                          <td class="left" width="10%" >
                            <span class="event-status-promo" contenteditable>推广中</span>
                          </td>
                          <td class="left" width="14%" contenteditable>
                            <p > <span >报名商品：</span><span>238</span></p>
                            <p ><span >待审核：</span><span>123</span> </p>
                            <p ><span> 审核通过：</span> <span>112</span></p>
                          </td>
                          <td class="left" width="18%" >
                            <div class="fl" contenteditable>
                              <p ><span class="color-l" >起：</span>
                                <span>2020-11-30</span>
                              </p>
                              <p >
                                <span class="color-l" >止：</span>
                                <span>2020-12-31</span>
                              </p>
                            </div>
                          </td>
                          <td class="left" width="14%" contenteditable>
                            <span class="yuan">￥</span>
                            <span
                              class="integer" >1,035</span>
                            <span
                              class="pointer"
                            >.</span>
                            <span class="decimal" >10</span>
                          </td>
                          <td class="center" width="120" >
                            <div class="operation" >
                              <div class="btn-export" >
                                <button
                                  class="btn btn-small btn-brand btn-export-delegate w100 mb5"
                                >导出商品
                                </button>
                                <div
                                  class="btn-export-detail"
                                  id="btn-export-detail"
                                >
                                  <a class="btn btn-small mb5 w120" >导出报名商品</a>
                                  <a class="btn btn-small mb5 w120">导出Excel推广</a>
                                </div>
                              </div>
                              <a href="#" class="btn btn-gray btn-small mr10">审核</a>
                              <a href="#" class="btn btn-gray btn-small" >效果</a>
                            </div>
                          </td>
                        </tr>`
        $('#activitytable').append(str)
      }
    }
  }
</script>
<style lang='less' scoped>
  @font-face {
    font-family: pubfont;
    font-weight: normal;
    font-style: normal;
    src: url('../../assets/font/font_55467_qntwequuqdm.ttf') format('truetype')
  }

  /*@import "//at.alicdn.com/t/font_55467_q69s0qa8yba.css";*/

  .pubfont {
    font-size: 12px;
    vertical-align: -1px;
    font-family: pubfont;
    font-weight: 400;
    font-variant: normal;
    font-display: fallback;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
  }

  .pubfont.f16 {
    font-size: 16px
  }

  @import '../../assets/css/neat.css';
  @import '../../assets/css/main.css';
  .active {
    #alimama-footer {
      padding: 30px 10px;
      text-align: left;
      font-size: 12px;
      line-height: 2.4;
      font-family: 'helvetica neue', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', \\5FAE\\8F6F\\96C5\\9ED1, \\5B8B\\4F53, sans-serif;
    }

    #alimama-footer a,
    #alimama-footer span {
      color: #333;
      filter: alpha(opacity=50);
      filter: none \9;
      opacity: 0.5;
    }

    #alimama-footer a:hover {
      filter: alpha(opacity=100);
      filter: none \9;
      opacity: 1;
    }

    #alimama-footer .alimama-info .link,
    #alimama-footer .alimama-info .copyright {
      display: inline-block;
    }

    #alimama-footer .alimama-info a,
    #alimama-footer .alimama-info span {
      margin-right: 20px;
    }

    #alimama-footer .alimama-info b {
      display: none;
      font-weight: 400;
      color: #DDD;
    }

    #alimama-footer {
      text-align: center;
    }
  }
</style>
